import { View, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import styles from "./index.module.scss";
import React, { FC, useEffect } from "react";
import { getNaviigationRect } from "./getNaviigationRect";

interface CMiniHeaderProps {
  title: string;
  frontColor?: string;
  backgroundColor?: string;
  hideHome?: boolean;
  backgroundImage?: string;
  transparent?: boolean;
}

export const MiniHeader: FC<CMiniHeaderProps> = ({
  title,
  frontColor,
  backgroundColor,
  hideHome,
  backgroundImage,
  transparent,
}) => {
  let naviigationInfo = getNaviigationRect();
  useEffect(() => {
    hideHome && Taro.hideHomeButton();
  }, []);
  let computeStyles = transparent
    ? {
        background: "transparent",
      }
    : {
        background: backgroundColor,
        backgroundImage: backgroundImage ? `url(${backgroundImage})` : undefined,
        backgroundSize: backgroundImage ? `100% 100%` : undefined,
      };
  let showBackBtn = Taro.getCurrentPages().length > 1;

  const btnStyles = {
    top: naviigationInfo.rect.top + "px",
    left: naviigationInfo.systemInfo.windowWidth - naviigationInfo.rect.right + "px",
    height: naviigationInfo.rect.height + "px",
  };
  return (
    <View>
      {!transparent && (
        <View
          style={{
            height: naviigationInfo.barHeight + "px",
          }}
        />
      )}
      <View
        className={styles.wrap}
        style={{
          height: naviigationInfo.barHeight + "px",
          lineHeight: naviigationInfo.contentBarHeight + "px",
          paddingTop: naviigationInfo.statusBarHeight + "px",
          color: frontColor,
          ...computeStyles,
        }}
      >
        {showBackBtn ? (
          !hideHome ? (
            <View
              className={styles.btnWrap}
              style={{
                ...btnStyles,
                borderRadius: naviigationInfo.rect.height / 2 + "px",
                width: naviigationInfo.rect.width + "px",
              }}
            >
              <Image
                className={[styles.btn, styles.arrow].join(" ")}
                src="https://app-stg.curiocdn.com/stage/yorozuya/harrods-residence-dashboard/1381311997240414208.png"
                style={{
                  height: (28 / 48) * naviigationInfo.rect.height + "px",
                  width: (18 / 48) * naviigationInfo.rect.height + "px",
                }}
                onClick={() => {
                  Taro.navigateBack();
                }}
              />
              <View className={styles.line}></View>
              <Image
                className={styles.btn}
                src="https://app-stg.curiocdn.com/stage/yorozuya/harrods-residence-dashboard/1381313813571178496.png"
                style={{
                  height: (28 / 48) * naviigationInfo.rect.height + "px",
                  width: (28 / 48) * naviigationInfo.rect.height + "px",
                }}
                onClick={() => {
                  Taro.switchTab({
                    url: "/pages/index/index",
                  });
                }}
              />
            </View>
          ) : (
            <View
              className={styles.btnWrap}
              style={{
                ...btnStyles,
                width: btnStyles.height,
                borderRadius: naviigationInfo.rect.height / 2 + "px",
              }}
              onClick={() => {
                Taro.navigateBack();
              }}
            >
              <Image
                className={styles.oneArrowBtn}
                src="https://app-stg.curiocdn.com/stage/yorozuya/harrods-residence-dashboard/1381311997240414208.png"
              />
            </View>
          )
        ) : !hideHome ? (
          <View
            className={styles.btnWrap}
            style={{
              ...btnStyles,
              width: btnStyles.height,
              borderRadius: naviigationInfo.rect.height / 2 + "px",
            }}
            onClick={() => {
              Taro.switchTab({
                url: "/pages/index/index",
              });
            }}
          >
            <Image
              className={styles.oneHomeBtn}
              src="https://app-stg.curiocdn.com/stage/yorozuya/harrods-residence-dashboard/1381313813571178496.png"
            />
          </View>
        ) : null}

        {title}
      </View>
    </View>
  );
};

export default MiniHeader;
